<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue2.6.12.js"></script>
	</head>
	<body>
		<div id="app">
			<btn></btn>
			<button type="button">点击</button>
		</div>
	</body>
	<script type="text/javascript">
		//创建组件 组件名称不能和标签冲突
		// js中是驼峰命名，html中驼峰用 - 进行连接，建议全部进行小写就不会chu出现问题
		// template 中的 dom片段没有代码提示   --vue 单文件时解决
		// css 只能写成行内样式，样式固定      --vue 单文件时解决
		// template 中的 dom 片段只能包含一个根节点
		// 组件是孤岛，无法【直接】访问外面组件的状态或者方法， ---可以通过间接组件通信来交流
		
		Vue.component("btn",{
			// data 是一个方法，返回的是一个对象
			data:function(){
				return {
					count:0,
					myname:"yyf"
				};
			},
			// template 只能是一个根元素
			template:`
				<div>
					<div>{{myname}}</div>
					<button @click="count++">点击添加{{count}}</button>
				</div>
			`,
		});
		
		// 根组件  里面可以包含其他组件，其他组件就是根组件的子组件
		var vm = new Vue({
			el:'#app',
			data:{
				lists:[
					
				]
			},
			methods:{
				
			}
		});		
	</script>
</html>
